<template>
  <div class="echart-yAxis-axisTick">
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].axisTick.show')"
      :label="$demoi18n('echart.label.showAxisScale')"
      type="switch"
    />
    <FormItem
      v-if="isTimeValueAxis('y')"
      :helptip="$demoi18n('echart.splitNumber.tip')"
      :form="form"
      :option="fixPath('echart.yAxis.[x].splitNumber')"
      :label="$demoi18n('echart.label.splitNumber')"
      type="number"
      show-switch
      :switch="intervalSwitchs.splitNumber"
      @switch-change="intervalSwitchsChange($event, 'splitNumber')"
    />
    <FormItem
      v-if="isTimeValueAxis('y')"
      :form="form"
      :option="fixPath('echart.yAxis.[x].interval')"
      :label="$demoi18n('echart.label.setDataInterval')"
      type="number"
      show-switch
      :switch="intervalSwitchs.interval"
      @switch-change="intervalSwitchsChange($event, 'interval')"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].axisTick.alignWithLabel')"
      :label="$demoi18n('echart.label.alignmentOfTickMarksAndLabels')"
      type="switch"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].axisTick.inside')"
      :label="$demoi18n('echart.label.shaftScaleInward')"
      type="switch"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].axisTick.length')"
      :label="$demoi18n('echart.label.lengthOfShaftScale')"
      type="number"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].axisTick.lineStyle.color')"
      :label="$demoi18n('echart.label.axisScaleColor')"
      type="color"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].axisTick.lineStyle.width')"
      :label="$demoi18n('echart.label.axisScaleLineweight')"
      type="number"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].axisTick.lineStyle.type')"
      :label="$demoi18n('echart.label.axisType')"
      type="select"
      :options="lineTypes"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import { lineTypes } from '@/components/common/echart/form-item-options.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

export default {
  components: { FormItem },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      lineTypes,
      intervalSwitchs: {
        splitNumber: '',
        interval: '',
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    intervalSwitchsChange(val, key) {
      if (val === true) {
        Object.entries(this.intervalSwitchs).map(([i]) => {
          const isTrue = i === key;
          this.intervalSwitchs[i] = isTrue;
        });
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
